<template>
  <div class="Address">
    <Myheader title="选择收货地址" :isLeft="true" />

    <!-- 搜框 -->
    <div class="city-search">
      <div class="search-city">
        <div class="city-title" @click="linkCity()" v-if="!isAdd">
          {{ city }}<i class="iconfont icon-xia"></i>
        </div>
        <div class="line" v-if="!isAdd"></div>
        <div class="iconfont icon-sousuo"></div>
        <div class="city-input">
          <div>
            <input type="text" v-model="searchVal" placeholder="小区/写字楼/学校等" />
          </div>
        </div>
      </div>
    </div>
    <!-- 当前定位 -->
    <div @click="handle()" v-if="!isAdd">
      <Localtion :address="address" />
    </div>
    <div @click="handleAddress()" v-else>
      <Localtion :address="addAddress" />
    </div>

    <!-- 搜索列表 -->
    <div v-for="(item, index) in areaList" :key="index" class="areaList">
      <div class="name">{{ item.name }}</div>
      <div class="city-list" @click="handle(item)">
        {{ item.district + item.address }}
      </div>
    </div>
    <!-- 地图 -->
    <div id="container" v-if="areaList"></div>
  </div>
</template>
<script>
import Myheader from '../components/Myheder.vue'
import Localtion from '../components/Location.vue'
export default {
  name: 'Address',
  data () {
    return {
      city: this.$route.params.city,
      searchVal: '',
      areaList: [],
      map: null,
      lat: '',
      lng: '',
      // address: this.$store.getters.address,
      addAddress: this.$route.query.address || this.$store.getters.address,
      isAdd: this.$route.query.isAdd
    }
  },
  created () {
    const position = JSON.parse(localStorage.getItem('position')) || {
      lat: 118.887659,
      lng: 31.737687,
    }
    this.lat = position.lat
    this.lng = position.lng


  },
  watch: {
    searchVal () {
      this.searchPlace()
    },
  },
  computed: {
    address () {
      return this.$store.getters.address
    },
  },
  methods: {
    /* 搜索地址 */
    searchPlace () {
      const self = this
      AMap.plugin('AMap.Autocomplete', function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: self.city,
        }
        var autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(self.searchVal, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
          self.areaList = result.tips
          console.log(self.areaList)
        })
      })
    },
    //添加地址选择定位
    handleAddress () {

      this.$router.push({ name: 'addAddress', params: { address: this.addAddress } })
    },
    /* 点击列表事件 */
    handle (info) {
      const address = info.district + info.address + info.name
      if (info) {
        this.$store.dispatch('setAddress', address)
        this.searchVal = ''
        const position = JSON.stringify(info.location)
        localStorage.setItem('position', position)
      } else {
        this.$store.dispatch('setAddress', this.address)
      }
      if (this.isAdd) {
        this.$router.push({ name: 'addAddress', params: { address } })
        return
      } else {
        this.$router.push('/home')
      }

    },

    /* 获取地图 */
    mapDown () {
      const center = [this.lng, this.lat]
      console.log('center', center)
      this.map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16, //初始化地图层级
        center: center, //初始化地图中心点
      })
    },

    //获取并展示当前城市信息
    logMapinfo () {
      let self = this
      this.map.getCity(function (info) {
        if (info.city) {
          self.city = info.city
        } else {
          self.city = info.province
        }
      })
    },

    /* 点击跳转city */
    linkCity () {
      this.$router.push('/city')
    }
  },
  mounted () {
    this.mapDown()
    if (!this.$route.params.city) {
      this.$route.params.city
    }
    this.city = this.$route.params.city
  },
  components: {
    Myheader,
    Localtion,
  },
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 69vh;
}
.city-search {
  height: 1.5rem;
  background-color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}
.search-city {
  width: 80%;
  height: 0.95rem;
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 0.2rem;
  padding: 0 0.5rem;
}
.search-city input {
  font-size: 0.35rem;
  height: 0.7rem;
  width: 4.5rem;
  outline: none;
  border: none;
  padding: 0 0.1rem;
  background-color: transparent;
  color: rgb(56, 61, 61);
}
.city-title {
  width: 1.8rem;
  height: 1.1rem;
  line-height: 1.1rem;
}
.iconserach {
  width: 0.5rem;
}
.line {
  height: 0.4rem;
  margin-right: 0.5rem;
  border-right: 0.05422rem rgb(110, 101, 101) solid;
}
.city-list {
  line-height: 1rem;
  color: rgb(87, 84, 84);
}
.areaList {
  background-color: #fff;
  padding: 0.2rem 0.5rem;
  border-top: 1px #ccc solid;
}
.areaList .name {
  font-size: 0.4rem;
  font-weight: 700;
}
</style>
